<template>
  <div class="content">
    <van-row class="search-header">
      <van-col span="24">
        <van-search
          v-model="value"
          shape="round"
          placeholder="请输入订单号或客户名称"
          @input="onQueryOrders()"
        />
      </van-col>
      <!-- <van-col span="6">
        <van-dropdown-menu>
          <van-dropdown-item
            class="drop-content"
            style="background-color: #1989fa"
            v-model="value1"
            :options="option1"
            @change="onQueryOrderData"
          />
        </van-dropdown-menu>
      </van-col>-->
    </van-row>
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
      <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
        <div class="body-content">
          <van-swipe-cell v-for="(item, index) in items" :key="index">
            <van-cell center @click="onQueryDetail(item)">
              <van-row>
                <van-col span="24">
                  <!-- 订单号 -->
                  <van-row>
                    <van-col span="24">{{item.code}}</van-col>
                  </van-row>
                  <!-- 客户 -->
                  <van-row>
                    <van-col span="16">{{item.partnerName}}</van-col>
                    <van-col span="8">
                      <van-tag plain type="primary" v-if="item.status==='审核中'">{{item.status}}</van-tag>
                      <van-tag plain type="danger" v-if="item.status==='驳回'">{{item.status}}</van-tag>
                      <van-tag plain type="success" v-if="item.status==='发货中'">{{item.status}}</van-tag>
                      <van-tag plain type="warning" v-if="item.status==='已发货'">{{item.status}}</van-tag>
                    </van-col>
                  </van-row>
                  <van-row>
                    <van-col span="24">结算客户：{{item.settlecustomerName}}</van-col>
                  </van-row>
                  <!-- 运单号 -->
                  <van-row>
                    <van-col span="5" class="box">物流信息：</van-col>
                    <van-col span="19" class="box">{{item.information}}</van-col>
                  </van-row>
                  <van-row>
                    <van-col span="5" class="box">快递单号：</van-col>
                    <van-col span="19" class="box">{{item.waybillNumber}}</van-col>
                  </van-row>
                  <!-- 单据日期 -->
                  <van-row>
                    <van-col span="6" class="item-content">{{item.voucherdate}}</van-col>
                    <van-col
                      span="9"
                      class="item-content"
                    >订单：￥{{onUnitConvert(item.amount).num}}{{onUnitConvert(item.amount).unit}}</van-col>
                    <!-- 收款金额 -->
                    <van-col
                      span="9"
                      class="item-content"
                    >收款：￥{{onUnitConvert(item.OrigReceiveAmount).num}}{{onUnitConvert(item.OrigReceiveAmount).unit}}</van-col>
                    <!-- <van-col
                      span="8"
                      class="item-content"
                    >收款金额：￥{{onUnitConvert(item.OrigReceiveAmount)}}</van-col>-->
                  </van-row>
                </van-col>
              </van-row>
            </van-cell>
            <!--  -->
            <template #right>
              <van-button
                square
                style="height:100%"
                type="danger"
                text="删除"
                v-show="item.status==='驳回'||item.status==='审核中'"
                @click="onDelDatial(item)"
              />
            </template>
          </van-swipe-cell>
        </div>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
import { queryOrders, queryOrderDetial, delOrder } from "@/api/search/search";
import { unitConvert } from "@/api/public/public";
import { Toast } from "vant";
export default {
  data() {
    return {
      // 下拉框
      value1: "",
      option1: [
        {
          text: "全部",
          value: "",
        },
        {
          text: "驳回",
          value: "驳回",
        },
        {
          text: "审核中",
          value: "审核中",
        },
        {
          text: "发货中",
          value: "发货中",
        },
        {
          text: "已发货",
          value: "已发货",
        },
        // 驳回、审核中、发货中、已发货
      ],
      items: [],
      // 条件查询
      value: "",
      // 下拉翻页
      page: 1,
      limit: 10,
      count: "", //总数
      loading: false,
      finished: false,
      refreshing: false,
      mainPageCondition: {
        startTime: "",
        endTime: "",
        idclerk: "",
      },
      // 防抖计时器
      timeout: "",
    };
  },
  created() {
    // this.mainPageCondition = this.$session.get("mainPageCondition");
    // let condiiton = JSON.parse(mainPageCondition);
    let mainPage = this.$route.query.mainPage;
    mainPage === true &&
      (this.mainPageCondition = this.$session.get("mainPageCondition"));
    this.onRefresh();
  },
  methods: {
    // 下拉菜单事件
    onQueryOrderData() {
      this.onRefresh();
    },
    // 单位换算
    onUnitConvert(num) {
      return unitConvert(num);
    },
    // 下拉刷新事件
    onLoad(mainPageCondition) {
      return new Promise((res, rej) => {
        res();
      })
        .then(() => {
          this.getOrderData(mainPageCondition);
        })
        .catch(() => {});
    },
    onRefresh(mainPageCondition) {
      // 清空列表数据
      this.finished = false;
      this.page = 1;
      this.items = [];
      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      this.loading = true;
      this.onLoad(mainPageCondition);
    },
    // 删除订单
    onDelDatial(item) {
      // 获取账套下的数据库
      let DsName = this.$session.get("DsName");
      let condition = {
        id: item.id,
        DsName: JSON.parse(DsName),
      };
      delOrder(condition, (data) => {
        data.success === true ? Toast(data.info) : Toast(data.info);
        this.page = 1;
        this.items = [];
        this.getOrderData();
      });
    },
    // 条件查询订单
    onQueryOrders() {
      // this.page = 1;
      // this.items = [];
      // 防抖
      this.debounce(500);
    },
    //防抖debounce代码：
    debounce(wait) {
      let _this=this;
      if (this.timeout) clearTimeout(this.timeout);
      this.timeout = setTimeout(() => {
        _this.onRefresh();
      }, wait);
    },
    // debounce(fn, delay) {
    //   console.log("debounce");
    //   var timeout = null; // 创建一个标记用来存放定时器的返回值
    //   return function (e) {
    //     // 每当用户输入的时候把前一个 setTimeout clear 掉
    //     console.log("return");
    //     clearTimeout(timeout);
    //     // 然后又创建一个新的 setTimeout, 这样就能保证interval 间隔内如果时间持续触发，就不会执行 fn 函数
    //     timeout = setTimeout(() => {
    //       console.log("timeout");
    //       fn.apply(this, []);
    //     }, delay);
    //   };
    // },
    // 查看订单明细
    onQueryDetail(item) {
      // queryOrderDetial(id,data=>{
      // })
      this.$router.push({
        name: "orderPage",
        query: {
          id: item.id,
          status: item.status,
        },
      });
      // idSaleOrderDTO
      // orderDetialPwdPage
    },
    // 获取订单数据
    getOrderData(mainPageCondition) {
      // let items = this.items;
      // 获取账套下的数据库
      let DsName = this.$session.get("DsName");
      let user = JSON.parse(this.$session.get("user"));
      // 业务员id
      //   // 业务员id
      let person = this.$session.get("person");
      let idclerk = JSON.parse(person).personId;

      let condition = {
        DsName: JSON.parse(DsName),
        idclerk: idclerk, // 业务员id
        state: this.value1, // 审核状态
        // startTime: this.mainPageCondition.startTime || "", //  //开始时间
        // endTime: this.mainPageCondition.endTime || "", //开始时间
        code: this.value,
        page: this.page++,
        limit: this.limit,
        appBs: user.appBs,
      };
      queryOrders(condition, (data) => {
        let items = data.data;
        // 总数
        this.count = data.count;
        items.forEach((ele) => {
          this.items.push(ele);
        });
        //   // 加载状态结束
        this.loading = false;
        this.refreshing = false;
        // 数据全部加载完成
        if (this.items.length >= this.count) {
          this.finished = true;
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.content {
  .search-header {
    height: 60px;
    width: 100%;
    color: white;
    line-height: 60px;
    // background-color: #1989fa;
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: 1;

    .drop-content {
      // background="#1989FA"
      background-color: #1989fa !important;
      color: #1989fa;
      // height: 100%;
    }

    // position: absolute;
    // top: 0px;
  }

  .body-content {
    margin-top: 60px;
    margin-bottom: 60px;

    .item-content {
      color: #ccc;
    }
  }
}

.van-dropdown-menu__bar {
  background-color: #1989fa !important;
  box-shadow: 0 2px 12px rgba(100, 101, 102, 0.08);
}

.van-dropdown-menu__item {
  background-color: #1989fa !important;
}
.box{
  overflow: hidden;
}
</style>
